/**
 * @namespace Bookmark.components.EditForm
 * @author burning <www.cafeinit.com>
 * @version 2018.12.11
 */

import { PureComponent } from 'react'

class EditForm extends PureComponent {
  static defaultProps = {
    formTitle: 'Create Bookmark',
    values: {},
    onCancel: () => {},
    onSave: () => {}
  }

  constructor(props) {
    super(props)

    this.state = {
      title: props.values.title || '',
      url: props.values.url || '',
      description: props.values.description || ''
    }
  }

  handleTitleOnChange = evt => {
    // console.log('handleTitleOnChange', evt.target.value)
    this.setState({ title: evt.target.value })
  }

  handleUrlOnChange = evt => {
    // console.log('handleUrlOnChange', evt.target.value)
    this.setState({ url: evt.target.value })
  }

  handleDescriptionOnChange = evt => {
    // console.log('handleUrlOnChange', evt.target.value)
    this.setState({ description: evt.target.value })
  }

  handleSave = () => {
    const { onSave } = this.props
    // console.log('handleSave', this.state)
    onSave(this.state)
  }

  render() {
    const { formTitle, onCancel } = this.props
    const { title, url, description } = this.state

    return (
      <div>
        <h2>{formTitle}</h2>
        <div>
          <div>Title</div>
          <div>
            <input
              type="text"
              value={title}
              onChange={this.handleTitleOnChange}
            />
          </div>
        </div>

        <div>
          <div>Url</div>
          <div>
            <input
              type="text"
              value={url}
              onChange={this.handleUrlOnChange}
            />
          </div>
        </div>

        <div>
          <div>Description</div>
          <div>
            <textarea
              value={description}
              onChange={this.handleDescriptionOnChange}
            />
          </div>
        </div>
        <div>
          <button onClick={this.handleSave}>Save</button>
          <button onClick={onCancel}>Cancel</button>
        </div>
      </div>
    )
  }
}

export default EditForm
